<template>
    <el-select 
      multiple 
      filterable
      :disabled="disabled"
      :loading="mulSelectLoading"
      :collapse-tags="collapseTags"
      v-model='selectedArr' 
      :placeholder=placeholderValue
      @change='changeSelect' 
      :filter-method="filterValue"
      @focus="handlFocus"
      >
      <el-checkbox v-model="checked" @change='selectAll' style="margin:10px 0 10px 20px;">全选</el-checkbox>
      <el-option v-for='item in selectOptions' :key='item.id' :label="item.value" :value="item.id"></el-option>
    </el-select>
  </template>
  <script>
   import {
     shenyeShopTagSelect,
   } from "@/api/merchants/merchantLabelSettings";
  export default {
    name:'BeeTokenSystemH5Index',
    data() {
      return {
        checked: false,
        mulSelectLoading:false, //select 加载动画开关
        selectedArr: [],
        businessListings:[], //当前选中的数据
      }
    },
    props:{
      // 选项
      selectOptions:{
        type:Array,
        default(){
          return []
        }
      },
      // 是否禁用
      disabled:{
        type:Boolean,
        default:false
      },
      // 已选中选项
      mulSelecteds:{
        type:Array,
        default(){
          return []
        }
      },
      collapseTags:{
        type:Boolean,
        default:true   
      },
      placeholderValue:{
        type:String,
        default:'请选择'
      },
      tagSettingId:{
        type:[String,Number],
        default:''
      }
    },
    methods: {
      selectAll() {
        // this.selectedArr = [];
        if (this.checked) {
           this.selectOptions.forEach((item) => { this.selectedArr.push(item.id )});
           this.selectedArr = [...new Set(this.selectedArr)]; //利用了Set结构不能接收重复数据的特点
        } else {
            // 去掉数组的交集
            var idList = this.businessListings.map(item=> item.id)
            let aSet = new Set(this.selectedArr);
            let bSet = new Set(idList); 
            let differenceSet= new Set([...aSet ].filter(x => !bSet .has(x)));
            this.selectedArr = Array.from(differenceSet);
        }
        this.$emit('update:updateMultipleSelect',this.selectedArr);
      },
      handlFocus(){
        // console.log(55)
        this.getBusinessListings()
      },
      changeSelect(val) {
        if (val.length === this.selectOptions.length) {
          this.checked = true;
        } else {
          this.checked = false;
        }
        this.$emit('update:updateMultipleSelect',this.selectedArr);
      },
    //  自定义搜索
     async filterValue(query){
        if(query !== ""){
            await this.getBusinessListings(query)
        }else{
            await this.getBusinessListings()
            // this.changeSelect(this.selectedArr)
        }
      },
      async getBusinessListings(query = ''){
           var data = {
                tagSettingId:this.tagSettingId,
                shopName:query,
           }
                // this.mulSelectLoading = true
            try {
                var res = await shenyeShopTagSelect(data)
                this.businessListings = res.result
                // this.mulSelectLoading = false
                this.$emit('update:updateMultipleListings',this.businessListings);
                var idList = this.businessListings.map(item=> item.id)
                // 判断arr1是否包含arr2
                const isInclude = (arr1, arr2) => arr2.every((val) => arr1.includes(val))
                if(isInclude(this.selectedArr,idList)){
                    this.checked = true;
                }else{
                    this.checked = false;
                }
            } catch (error) {
                // this.mulSelectLoading = false
            }

      }
    },
    watch:{
      mulSelecteds:{
        handler(newVal,oldVal){
          this.selectedArr = newVal;
          if (this.selectedArr.length && 
              this.selectedArr.length === this.selectOptions.length) 
          {
            this.checked = true;
          }
        },
        immediate: true
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>

  </style>
